<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>心情报告</title>
  <meta name="description" content="">
  <style>
    :root {
      --nav-height: 20px;
      --bar-height: {$h}px;
    }
  </style>
  <link rel="stylesheet" href="/static/note_report/css/index.css?v=5">
  <script>
      const mood_chart = {:json_encode($data['mood_chart'])};
      const app_type = `{$app_type}`;
  </script>
</head>
<body>
<div class="container">
  <div class="header">
    <div class="nav">
      <div class="back" onclick="commonJsToNative('local', 'back');"></div>
      <div class="title">心情报告</div>
      <div class="mood-all" onclick="commonJsToNative('local', 'mood_note_index?need_auth=2')">心情日记</div>
    </div>
  </div>
  <div class="body">
    <div class="card-box">
      <div class="box-head">
        <div class="head-title">心情分布</div>
        <div class="type-list">
          {foreach $data.mood_distribution as $k1 => $v1}
          <div class="type-item {if $k1 === 0}cur{/if}">{$v1.tab_name}</div>
          {/foreach}
        </div>
      </div>
      <div class="box-body">
        {foreach $data.mood_distribution as $k1 => $v1}
        <div class="type-content {if $k1 === 0}cur{/if}">
          {if count($v1.mood_list) === 0}
          <div class="list-empty">暂时没有任何心情</div>
          {/if}
          {foreach $v1.mood_list as $k2 => $v2}
          <div class="list-item">
            <div class="mod-img" style="background-image: url('{$v2.icon}')"></div>
            <div class="mod-des">{$v2.name}</div>
          </div>
          {/foreach}
        </div>
        {/foreach}
      </div>
      <div class="box-foot">
        {foreach $data.mood_distribution as $k1 => $v1}
        <div class="mood-count {if $k1 === 0}cur{/if}">
          <div class="text left">共记录心情：{$v1.total}次</div>
          {if $v1.most}
          <div class="text right">记录最多的心情：{$v1.most}</div>
          {/if}
        </div>
        {/foreach}
      </div>
    </div>

    <div class="card-box">
      <div class="box-head">
        <div class="head-title">心情曲线</div>
      </div>
      <div class="box-body">
        <div class="chart-y">
          <div class="y-item">极好</div>
          <div class="y-item">不错</div>
          <div class="y-item">平平</div>
          <div class="y-item">沮丧</div>
          <div class="y-item">极差</div>
        </div>
        <div class="chart-content chart-curve">
          <div class="canvas-zoom" style="width: {$w}rem;height: 15rem;overflow-x: scroll;">
            <canvas id="mod-chart"></canvas>
          </div>

        </div>
      </div>
    </div>

    <div class="card-box">
      <div class="box-head">
        <div class="head-title">心情占比</div>
        <div class="type-list">
          {foreach $data.mood_distribution2 as $k1 => $v1}
          <div class="type-item {if $k1===0}cur{/if}">{$v1.tab_name}</div>
          {/foreach}
        </div>
      </div>
      <div class="box-body">
        <div class="chart-y">
          <div class="y-item">极好</div>
          <div class="y-item">不错</div>
          <div class="y-item">平平</div>
          <div class="y-item">沮丧</div>
          <div class="y-item">极差</div>
        </div>
        {foreach $data.mood_distribution2 as $k1 => $v1}
        <div class="chart-content chart-progress {if $k1===0}cur{/if}">
          <div class="progress-item">
            <div class="progress-line">
              <div class="progress-show" style="width: {$v1.mood_status5}%"></div>
            </div>
            <div class="progress-text">{$v1.mood_status5}%</div>
          </div>
          <div class="progress-item">
            <div class="progress-line">
              <div class="progress-show" style="width: {$v1.mood_status4}%"></div>
            </div>
            <div class="progress-text">{$v1.mood_status4}%</div>
          </div>
          <div class="progress-item">
            <div class="progress-line">
              <div class="progress-show" style="width: {$v1.mood_status3}%"></div>
            </div>
            <div class="progress-text">{$v1.mood_status3}%</div>
          </div>
          <div class="progress-item">
            <div class="progress-line">
              <div class="progress-show" style="width: {$v1.mood_status2}%"></div>
            </div>
            <div class="progress-text">{$v1.mood_status2}%</div>
          </div>
          <div class="progress-item">
            <div class="progress-line">
              <div class="progress-show" style="width: {$v1.mood_status1}%"></div>
            </div>
            <div class="progress-text">{$v1.mood_status1}%</div>
          </div>
        </div>
        {/foreach}
      </div>

    </div>
    {if (isset($data.summarize_good) && !empty($data.summarize_good)) || (isset($data.summarize_bad) &&!empty($data.summarize_bad))}
    <div class="card-box" style="margin-bottom: 2rem;">
      <div class="box-head">
        <div class="type-list" style="float: left;">
          {if isset($data.summarize_good) && !empty($data.summarize_good)}
          <div class="type-item cur" style="margin-left: 0;">正面情绪</div>
          {/if}
          {if isset($data.summarize_bad) &&!empty($data.summarize_bad)}
            {if isset($data.summarize_good) && !empty($data.summarize_good)}
            <div class="type-item">负面情绪</div>
            {else}
            <div class="type-item cur">负面情绪</div>
            {/if}
          {/if}
        </div>
      </div>

      <div class="box-body">
        <div class="type-content cur">
          {if isset($data.summarize_good) && !empty($data.summarize_good)}
          <!--以下为有连续心情-->
          <div class="chart-des mood-good" style="background-color: {$data.summarize_good.bg_color};">
            <span class="point" style="background-color: {$data.summarize_good.point_color};"></span>
            {$data.summarize_good.tip}
          </div>

          <div class="most-days">
            <div class="day-line"></div>
            <div class="day-text">
              <span class="day-num">{$data.summarize_good.day_num}</span>
              <span class="day-unit">天</span>
            </div>
          </div>

          <div class="most-reason">
            <div class="title">持续了正面情绪的原因：</div>
            <div class="reason-list">
              {foreach $data.summarize_good.tags as $k2 => $v2}
              <div class="list-item">{$v2}</div>
              {/foreach}
            </div>
          </div>
          {/if}
        </div>
        <div class="type-content {if !(isset($data.summarize_good) && !empty($data.summarize_good))} cur {/if}">
          {if isset($data.summarize_bad) &&!empty($data.summarize_bad)}
          <!--以下为有连续心情-->
          <div class="chart-des mood-good" style="background-color: {$data.summarize_bad.bg_color};">
            <span class="point" style="background-color: {$data.summarize_bad.point_color};"></span>
            {$data.summarize_bad.tip}
          </div>

          <div class="most-days">
            <div class="day-line"></div>
            <div class="day-text">
              <span class="day-num">{$data.summarize_bad.day_num}</span>
              <span class="day-unit">天</span>
            </div>
          </div>

          <div class="most-reason">
            <div class="title">持续了负面情绪的原因：</div>
            <div class="reason-list">
              {foreach $data.summarize_bad.tags as $k2 => $v2}
              <div class="list-item">{$v2}</div>
              {/foreach}
            </div>
          </div>
          {/if}
        </div>
      </div>
    </div>
    {/if}
    <div class="footer"></div>
  </div>
</div>
  <script type="text/javascript" src="/static/jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="/static/note_report/js/index.js?v=5"></script>
</body>
</html>
